<template>

  <div class="app-container">

    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps :active="2" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="最终发布"/>
    </el-steps>

   
    <el-button type="text"   @click="openChapterDialog()">添加章节</el-button>

    <!-- 章节 -->
    <ul class="chapterList">
        <li
            v-for="chapter in chapterVideoList"
            :key="chapter.id">
            <p>
                {{ chapter.title }}

                <span class="acts">
                    <el-button type="text" @click.native="openVideoDialog(chapter.id)">添加小节</el-button>
                    <el-button style="" type="text" @click.native="openEditChapter(chapter.id)">编辑</el-button>
                    <el-button type="text" @click.native="removeChapter(chapter.id)">删除</el-button>
                </span>
            </p>

            <!-- 视频 -->
            <ul class="chapterList videoList">
                <li
                    v-for="video in chapter.children"
                    :key="video.id">
                    <p>{{ video.title }}

                <span class="acts">
                    <el-button style="" type="text" @click="openEditVideo(video.id)" >编辑</el-button>
                    <el-button type="text" @click="removeVideo(video.id)">删除</el-button>
                </span>
                    </p>
                </li>
            </ul>

        </li>
    </ul>

    <el-form label-width="120px">
      <el-form-item>
        <el-button @click="previous">上一页</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一页</el-button>
      </el-form-item>
    </el-form>

    <!-- 添加和修改章节表单 -->
    <el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
        <el-form :model="chapter" label-width="120px">
            <el-form-item label="章节序号">
                <el-input-number v-model="chapter.sort" :min="0" controls-position="right"/>
            </el-form-item>
            <el-form-item label="章节标题">
                <el-input v-model="chapter.title"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
            <el-button :disabled="isDisabled" type="primary" @click="saveOrUpdate">确 定</el-button>
        </div>
    </el-dialog>

       <!-- 添加和修改课时表单 -->
      <el-dialog :visible.sync="dialogVideoFormVisible" title="添加课时">
        <el-form :model="video" label-width="120px">
          <el-form-item label="课时标题">
            <el-input v-model="video.title"/>
          </el-form-item>
          <el-form-item label="课时排序">
            <el-input-number v-model="video.sort" :min="0" controls-position="right"/>
          </el-form-item>
          <el-form-item label="是否免费">
            <el-radio-group v-model="video.free">
              <el-radio :label="true" >免费</el-radio>
              <el-radio :label="false">默认</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="上传视频">
          <el-upload
              :on-success="handleVodUploadSuccess"
              :on-remove="handleVodRemove"
              :before-remove="beforeVodRemove"
              :on-exceed="handleUploadExceed"
              :file-list="fileList"
              :action="BASE_API+'/eduvod/video/uploadVideo'"
              :limit="1"
              class="upload-demo">
          <el-button size="small" type="primary">上传视频</el-button>
          <el-tooltip placement="right-end">
              <div slot="content">最大支持1G，<br>
                  支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                  GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                  MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                  SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
              <i class="el-icon-question"/>
          </el-tooltip>
          </el-upload>
      </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVideoFormVisible = false">取 消</el-button>
          <el-button :disabled="saveVideoBtnDisabled" type="primary" @click="saveOrUpdateVideo">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>
<script>
import chapter from '@/api/edu/chapter'
import video from '@/api/edu/video'
export default {
    data(){
        return{
            isDisabled:false,//防止章节重复提交
            saveVideoBtnDisabled:false,//防止小结重复提交
            saveBtnDisabled:false, //关闭禁止保存按钮,防止重复提交问题
            courseId:'',
            chapterVideoList:[],
            dialogChapterFormVisible:false,//取消章节弹出框
            dialogVideoFormVisible:false,//取消小结弹出框
            chapter:{//封装章节数据
               title:'',
               sort:0
            },
            video: {
                title: '',
                sort: 0,
                free: 0,
                videoSourceId: '',
                videoOriginalName:''//视频名称
            },
            BASE_API:process.env.BASE_API, // 接口API地址
            fileList: [],//上传文件列表
        }
    },
    created(){
      
      //从路径中获取id值
      if(this.$route.params && this.$route.params.id){
        this.courseId=this.$route.params.id;
        this.getChapterVideoList();
      }
    },
    methods:{
//--------------------------------以下是视频的操作--------------------------------------------            
       //删除视频
       handleVodRemove(){
          video.removeAliyunVideo(this.video.videoSourceId).then(response=>{
            this.$message({
               type:'success',
               message:'删除视频成功！'
             });
             //清空列表
             this.fileList=[];
             //清空视频id和名称
             this.video.videoSourceId='';
             this.video.videoOriginalName='';
          })
       },
       //删除视频之前
       beforeVodRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
       //上传视频成功之后
        handleVodUploadSuccess(response,file,fileList){
          //返回的结果是视频的id值
          this.video.videoSourceId=response.data.videoId;
          //上传视频的名称
          this.video.videoOriginalName=file.name;
        },
        //上传超时
        handleUploadExceed(){
           this.$message.warning('想要重新上传视频，请先删除已上传的视频');
        },
//--------------------------------以下是小节的操作--------------------------------------------      
        openVideoDialog(chapterId){
           //弹出小结框
           this.dialogVideoFormVisible=true;
           //设置章节id，防止小结表中的章节id为null
           this.video.chapterId=chapterId;
           //清空上一次添加小结的信息
           this.video.title='';
           this.video.sort=0;
           this.video.free=0;
           this.video.videoSourceId='';
           this.video.videoOriginalName='';
           this.fileList=[];
           //让保存按钮重新生效
           this.saveVideoBtnDisabled=false;
        },
        //添加小结
        addVideo(){
          //添加一次后，不能重复提交
          this.saveVideoBtnDisabled=true; 
          //设置课程id到video对象中
          this.video.courseId=this.courseId;//就是防止小结表中的课程id出现空值
          video.addVideo(this.video).then(reponse=>{
             //关闭弹框
             this.dialogVideoFormVisible=false;
             //弹出成功消息
             this.$message({
               type:'success',
               message:'添加小结成功！'
             });
             //刷新当前页面
              this.getChapterVideoList();//查询当前列表    
          })
        },
        //修改小结
        updateVideo(){
          this.saveVideoBtnDisabled=true; 
          video.updateVideo(this.video).then(reponse=>{
             //关闭弹框
             this.dialogVideoFormVisible=false;
             //弹出成功消息
             this.$message({
               type:'success',
               message:'修改小结成功！'
             });
             //刷新当前页面
             this.getChapterVideoList();//查询当前列表
          })
        },
        //修改小结需要回显数据
        openEditVideo(videoId){
          this.dialogVideoFormVisible=true;
           video.getVideo(videoId).then(response=>{
             this.video= response.data.video;
           })
        },
        saveOrUpdateVideo(){
          //判断小节是否有id值
          if(this.video.id){
            this.updateVideo();
          }else{
            this.addVideo();
          }
        },
        //删除小结
        removeVideo(videoId){
            this.$confirm('此操作将永久删除该小结, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                //先调用方法删除
                video.deleteVideo(videoId)
                .then(response=>{
                    //删除成功之后
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                     });
                   //删除成功之后，刷新页面
                   this.getChapterVideoList();
                });
            });
        },
//--------------------------------以下是章节的操作--------------------------------------------      
        //删除章节
        removeChapter(chapterId){
            this.$confirm('此操作将永久删除该章节, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                //先调用方法删除
                chapter.deleteChapter(chapterId)
                .then(response=>{
                    //删除成功之后
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                     });
                   //删除成功之后，刷新页面
                   this.getChapterVideoList();
                });
            });
        },
        openChapterDialog(){
          //弹出添加章节信息
          this.dialogChapterFormVisible=true;
          //清空上一次添加章节的信息
          this.chapter.title='';
          this.chapter.sort=0;
          //让保存按钮重新生效
          this.isDisabled=false;
        },
        //修改章节需要回显数据
        openEditChapter(chapterId){
          //弹出添加章节信息
          this.dialogChapterFormVisible=true;
          chapter.getChapter(chapterId).then(response=>{
            this.chapter= response.data.chapter;
          })
        },
        //添加章节
        addChapter(){
          //添加一次后，不能重复提交
          this.isDisabled=true; 
          //设置课程id到chapter对象中
          this.chapter.courseId=this.courseId;
          chapter.addChapter(this.chapter).then(reponse=>{
             //章节添加成功之后
             //关闭弹框
             this.dialogChapterFormVisible=false;
             //弹出成功消息
             this.$message({
               type:'success',
               message:'添加章节成功！'
             });
             //刷新当前页面
             this.getChapterVideoList();//查询当前列表
          })
        },
        //修改章节
        updateChapter(){
           this.isDisabled=true; 
          chapter.updateChapter(this.chapter).then(reponse=>{
             //章节修改成功之后
             //关闭弹框
             this.dialogChapterFormVisible=false;
             //弹出成功消息
             this.$message({
               type:'success',
               message:'修改章节成功！'
             });
             //刷新当前页面
             this.getChapterVideoList();//查询当前列表
          })
        },
        saveOrUpdate(){
          //判断章节是否有id值
          if(this.chapter.id){
            this.updateChapter();
          }else{
            this.addChapter();
          }
        },
        //获取所有的章节信息
        getChapterVideoList(){
            chapter.getAllChapterVideo(this.courseId)
             .then(response=>{
                this.chapterVideoList=response.data.allChapterVideo;
             })
        },
      
        previous(){
          //使用路由跳转到上一步
          this.$router.push({path:'/course/info/'+this.courseId})
        },
        next(){
          //使用路由跳转到下一步
          this.$router.push({path:'/course/publish/'+this.courseId});
        }
    }
}
</script>